<template>
	<view class="no-heading">
		<u-navbar
			backIconColor="#FFFFFF"
			:background="{background: 'linear-gradient(90deg,#615CED,#8286F2)'}"
			:border-bottom="false"
			title="考官评价"
			titleColor="#FFFFFF"
			height="88">
		</u-navbar>

		<view v-if="videoShow" class="videowrap">
			<view class="video-content">
				<video
					:src="lists[videoShowIdx]?(lists[videoShowIdx].video):''"
					enable-play-gesture="true"
					style="width: 100%;height: 420rpx;"
					:title="lists[videoShowIdx]?(lists[videoShowIdx].song):''">
				</video>
				<cover-view class="video-corver" v-if="lists[videoShowIdx]">
					<cover-view class="video-view">
						{{lists[videoShowIdx].song}}
					</cover-view>
				</cover-view>
			</view>
		</view>

		<scroll-view id="scrollView" :scroll-y="true" style="width: 100%;" :style="{height: svHeight,marginTop: videoShow ? '420rpx' : '0'}">
			<view class="pingjia">
				<view class="danxiang">
					<view v-for="(item,index) in lists" class="dxitem" :key="index">
						<view class="itemWrap">
							<view class="kemu">
								<p>{{item.subject?item.subject:''}}</p>
								<span>：</span>
							</view>
							<view class="combox">
								<uni-combox
									:border="false"
									placeholder="请选择"
									:candidates="options"
									:onSelector="onSelector"
									:onToggle="onToggle"
									:show="item.showSelector"
									candidates-key="title"
									:id="index"
									class="unicombox"
									:value="item.evaluation_type ? options[item.evaluation_type-1].title : ''">
								</uni-combox>
								<input
									class="com-input"
									v-model="item.evaluate"
									@input="onPickInput"
									:id="index"
									placeholder-style="color: #B1B1B1;"
									placeholder="请输入单首曲子评价"
								/>
							</view>
							<view class="bofang" @click="videoControl(index)">
								{{videoShow && videoShowIdx == index ? '隐藏' : '播放视频'}}
							</view>
						</view>
						<view v-if="item.image" class="kemupic">
							<view class="tupian">
								<p>{{item.subject?item.subject:''}}图片</p>
								<span>：</span>
							</view>
							<image :src="baseUrl + item.image" mode="widthFix"></image>
						</view>
					</view>
				</view>

				<view class="pytitle">
					<view class="shuxian"></view>
					<p>考官评语</p>
				</view>
				<view class="comment-nr" v-if="commentSort==1">
					<view class="comm-left">
						<textarea class="textarea1" v-model="comments" id="comms" @input="onInput" placeholder-style="color: #999999;font-size: 22rpx;" placeholder="请输入评语~">
						</textarea>
					</view>
					<view class="comm-right">
						<scroll-view :scroll-x="true" style="white-space: nowrap;">
							<view class="dengji">
								<view v-for="(tab,idxt) in commentTab" :key="idxt" class="tablist" @click="commentTabIndex(tab,idxt)">
									<p :style="{color: commentTabIdx==idxt?'#333333':'#666666'}">
										{{tab.category}}
									</p>
									<view class="xiahuaxian" :style="{opacity: commentTabIdx==idxt ? 1: 0}"></view>
								</view>
							</view>
						</scroll-view>
						<scroll-view :scroll-y="true" style="height: 260rpx;margin-top: 5rpx;">
							<view class="tabcomment" v-for="(comm,idxc) in commentTab[commentTabIdx]?commentTab[commentTabIdx].content:[]" :key="idxc" @click="commCheck(comm,idxc)">
								{{comm.content}}
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="comment-nr" v-else>
					<view class="comm-left">
						<textarea
							class="textarea1"
							v-model="comments"
							id="comms"
							@input="onInput"
							placeholder-style="color: #999999;font-size: 22rpx;"
							placeholder="请输入评语~">
						</textarea>
					</view>
				</view>

				<view class="zztitle">
					<view class="shuxian"></view>
					<p>最终评定</p>
				</view>
				<view class="pdpic">
					<image v-for="(item,idxn) in [1,2,3,4,5]" :key="idxn" :src="'../../static/ic_evaluate_' + item+(idxn == evaluateIdx ? '_hl' : '')+'.png'" mode="widthFix" @click="evaluate(item,idxn)"></image>
				</view>

				<view class="tjbtn" @click="signature">提交成绩</view>
				<view style="height: 50rpx;"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			baseUrl: this.$api.baseUrl,
			svHeight: 0,
			showSelector: false,
			options: [
				{
					id: 1,
					title: '好'
				},
				{
					id: 2,
					title: '较好'
				},
				{
					id: 3,
					title: '尚可'
				},
				{
					id: 4,
					title: '较差'
				}
			],
			lists: [],
			videoShow: false,
			videoShowIdx: 0,
			Timeout: 3000,
			TimeoutTarget: '',
			TimeoutId: '',
			comments: '',
			signType: 0,
			commentSort: 0,
			commentTabIdx: 0,
			commentTab: [],
			evaluateIdx: -1
		}
	},
	onReady() {
		let that = this;
		uni.getSystemInfo({
			success(res) {
				uni.createSelectorQuery().select('#scrollView').boundingClientRect(data => {that.svHeight = res.windowHeight - data.top + 'px'}).exec();
			}
		});
	},
	onLoad(ops) {
		this.id = ops?.id || '';
	},
	onShow() {
		this.getAssess();
	},
	methods: {
		onToggle(id, show) {
			this.lists.forEach((it, idx) => it.showSelector = (idx == id && show))
		},
		onSelector(id, index) {
			this.lists[id].evaluation_type = this.options[index].id;
			let body = {
				type: 3,
				id: this.lists[id]?.id,
				content: this.options[index].id
			};
			this.modifyScore(body);
		},
		pickChange(e) {
			this.lists[e?.target?.id].evaluation_type = e?.detail?.value;
			let body = {
				type: 3,
				id: this.lists[e?.target?.id]?.id,
				content: this.options[e?.detail?.value].id
			};
			this.modifyScore(body);
		},
		onPickInput(e) {
			if (this.TimeoutTarget != e?.target?.id) {
				this.TimeoutTarget = e?.target?.id;
			} else {
				clearTimeout(this.TimeoutId);
			}
			this.TimeoutId = setTimeout(() => {
				if (e?.detail?.value) {
					let body = {
						type: 4,
						id: this.lists[e?.target?.id]?.id,
						content: e?.detail?.value
					};
					this.modifyScore(body);
				}
			}, this.Timeout);
		},
		videoControl(index) {
			if (!this.lists[index]?.video) {
				uni.showToast({
					title: '暂无视频',
					icon: 'none'
				})
				return
			}

			if (this.videoShowIdx == index) {
				this.videoShow = !this.videoShow;
			} else {
				this.videoShow = true;
				this.videoShowIdx = index;
			}
		},
		onInput(e) {
			if (this.TimeoutTarget != e?.target?.id) {
				this.TimeoutTarget = e?.target?.id;
			} else {
				clearTimeout(this.TimeoutId);
			}
			this.TimeoutId = setTimeout(() => {
				if (e?.detail?.value) {
					let body = {
						type: 2,
						id: this.id,
						content: e?.detail?.value
					};
					this.modifyScore(body);
				}
			}, this.Timeout)
		},
		commentTabIndex(tab, idxt) {
			this.commentTabIdx = idxt;
		},
		commCheck(comm, idxc) {
			this.comments = this.comments + comm.content;
			let body = {
				type: 2,
				id: this.id,
				content: this.comments
			};
			this.modifyScore(body);
		},
		evaluate(item, idxn) {
			if (this.evaluateIdx != idxn) {
				this.evaluateIdx = idxn;
				let body = {
					type: 5,
					id: this.id,
					content: item
				};
				this.modifyScore(body);
			}
		},
		signature() {
			if (!this.comments) {
				uni.showToast({
					title: '请输入评语~',
					icon: 'none'
				})
				return
			}

			if (this.signType == 1) {
				this.sign();
			} else {
				uni.navigateTo({
					url: `signConfirm?id=${this.id}`
				});
			}
		},
		sign() {
			let that = this;
			const systemInfo = uni.getSystemInfoSync();
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.sign}`,
				method: 'POST',
				timeout: 30000,
				data: {
					id: that.id,
					device_id: systemInfo.deviceId
				},
				header: {
					'authtoken': that.$auth.token(that.$api.sign)
				},
				success(res) {
					if (res.data?.code == 1) {
						uni.$emit('sign', that.id);
						uni.showToast({
							title: res.data?.msg || '签字确认完成',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 1000);
					} else {
						uni.showToast({
							title: res.data?.msg || '签字确认失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '签字确认失败',
						icon: 'none'
					})
				}
			})
		},
		modifyScore(body, callback) {
			let that = this;
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.modifyScore}`,
				method: 'POST',
				timeout: 30000,
				data: body,
				header: {
					'authtoken': that.$auth.token(that.$api.modifyScore)
				},
				success(res) {
					if (res.data?.code == 1) {
						if (callback) callback();
					} else {
						uni.showToast({
							title: res.data?.msg || '评审失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '评审失败',
						icon: 'none'
					})
				}
			})
		},
		
		getAssess() {
			let that = this;
			const systemInfo = uni.getSystemInfoSync();
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.assessment}`,
				method: 'POST',
				timeout: 30000,
				data: {
					id: that.id,
					device_id: systemInfo.deviceId
				},
				header: {
					'authtoken': that.$auth.token(that.$api.assessment)
				},
				success(res) {
					if (res.data?.code == 1) {
						res?.data?.data?.answer?.forEach(it => it.showSelector = false);
						that.lists = res?.data?.data?.answer;
						that.commentSort = res?.data?.data?.comment_sort;
						that.commentTab = res?.data?.data?.comment;
						that.evaluateIdx = res?.data?.data?.evaluate - 1;
						that.comments = res?.data?.data?.general_comments;
						that.signType = res?.data?.data?.sign_type;
					} else {
						uni.showToast({
							title: res.data?.msg || '获取评审失败',
							icon: 'none',
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '获取评审失败',
						icon: 'none',
					});
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F8F8F8;
}
.no-heading{
	.videowrap{
		width: 100%;
		height: 420rpx;
		position: fixed;
		.video-content{
			width: 100%;
			height: 100%;
			position: relative;
			.video-corver{
				position: absolute;
				background-color: rgba(0,0,0,0.2);
				top: 0;
				left: 0;
				right: 0;
				.video-view{
					font-size: 30rpx;
					line-height: 70rpx;
					height: 80rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}
	.pingjia{
		width: 100%;
		height: 100%;
		.danxiang{
			width: 100%;
			background-color: #FFFFFF;
			padding: 0 25rpx 20rpx 25rpx;
			.dxitem{
				width: 100%;
				.itemWrap{
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					padding-top: 30rpx;
					.kemu{
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 160rpx;
						p{
							font-size: 30rpx;
							line-height: 30rpx;
							color: #333333;
							flex: 1;
						}
						span{
							font-size: 30rpx;
							line-height: 30rpx;
							color: #333333;
						}
					}
					.combox{
						display: flex;
						flex-direction: row;
						align-items: center;
						flex: 1;
						margin-left: 10rpx;
						.unicombox{
							width: 110rpx;
							height: 51rpx;
							background: #F7F7F7;
							border-radius: 6rpx;
							font-size: 24rpx;
							line-height: 51rpx;
							color: #B1B1B1;
							text-align: center;
						}
						.com-input{
							height: 51rpx;
							background: #F7F7F7;
							border-radius: 6rpx;
							flex: 1;
							font-size: 24rpx;
							line-height: 51rpx;
							color: #B1B1B1;
							margin-left: 15rpx;
							padding: 0 20rpx 0 20rpx;
						}
					}
					.bofang{
						width: 118rpx;
						height: 43rpx;
						background: linear-gradient(90deg, #615CED, #8286F2);
						border-radius: 22rpx;
						font-size: 20rpx;
						line-height: 43rpx;
						color: #FFFFFF;
						text-align: center;
						margin-left: 15rpx;
					}
				}
				.kemupic{
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					padding-top: 10rpx;
					.tupian{
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 160rpx;
						padding-top: 10rpx;
						p{
							font-size: 24rpx;
							line-height: 24rpx;
							color: #666666;flex: 1;
						}
						span{
							font-size: 30rpx;
							line-height: 30rpx;
							color: #333333;
						}
					}
					image{
						flex: 1;
						height: auto;
						margin: 0 10rpx;
					}
				}
			}
		}
		.pytitle{
			width: 100%;
			height: 90rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20rpx;
			.shuxian{
				width: 6rpx;
				height: 30rpx;
				background: linear-gradient(0deg, #615CED, #8286F2);
				border-radius: 3rpx;
				margin-left: 25rpx;
			}
			p{
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
				margin-left: 10rpx;
			}
		}
		.comment-nr{
			width: 100%;
			background-color: #FFFFFF;
			margin-top: 2rpx;
			padding: 30rpx 0 30rpx 25rpx;
			display: flex;
			flex-direction: row;
			.comm-left{
				width: 310rpx;
				height: 330rpx;
				background: #F7F7F7;
				border-radius: 10rpx;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.textarea1{
					color: #333333;
					font-size: 22rpx;
					width: 100%;
					height: 230rpx;
				}
			}
			.comm-right{
				width: 395rpx;
				height: 330rpx;
				margin-left: 10rpx;
				display: flex;
				flex-direction: column;
				.dengji{
					display: flex;
					flex-direction: row;
					.tablist{
						height: 60rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;
						margin: 0 7rpx 0 7rpx;
						p{
							font-size: 20rpx;
							color: #333333;
							line-height: 20rpx;
							padding: 0 10rpx 0 10rpx;
						}
						.xiahuaxian{
							width: 100%;
							height: 3rpx;
							background: #615CED;
							border-radius: 2rpx;
							position: absolute;
							bottom: 0;
						}
					}
				}
				.tabcomment{
					padding: 9rpx 12rpx 9rpx 12rpx;
					border: 2rpx solid #615CED;
					border-radius: 6rpx;
					font-size: 20rpx;
					color: #615CED;
					line-height: 26rpx;
					margin: 5rpx 20rpx 5rpx 10rpx;
				}
			}
		}
		.zztitle{
			width: 100%;
			height: 90rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20rpx;
			.shuxian{
				width: 6rpx;
				height: 30rpx;
				background: linear-gradient(0deg, #615CED, #8286F2);
				border-radius: 3rpx;
				margin-left: 25rpx;
			}
			p{
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
				margin-left: 10rpx;
			}
		}
		.pdpic{
			width: 100%;
			background-color: #FFFFFF;
			margin-top: 2rpx;
			padding: 30rpx 25rpx 30rpx 25rpx;
			display: flex;
			flex-direction: row;
			image{
				flex: 1;
				height: auto;
				margin: 0 25rpx 0 25rpx;
			}
		}
		.tjbtn{
			width: 600rpx;
			height: 90rpx;
			background: linear-gradient(0deg, #615CED, #8286F2);
			border-radius: 45rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			margin: 100rpx 0 0 75rpx
		}
	}
}
</style>
